<template>
  <div class="content">
    <div class="text">
      <label class="btn" for="exp">展开</label>
      <span>
        但听得蹄声如雷，十余乘马疾风般卷上山来。马上乘客一色都是玄色薄毡大氅，
        里面玄色布衣，但见人似虎，马如龙，人既矫捷，马亦雄骏，每一匹马都是高头
        长腿，通体黑毛，奔到近处，群雄眼前一亮，金光闪闪，却见每匹马的蹄铁竟然
        是黄金打就。来者一共是一十九骑，人数虽不甚多，气势之壮，却似有如千军万
        马一般，前面一十八骑奔到近处，拉马向两旁一分，最后一骑从中驰出</span>
    </div>
    <input type="checkbox" id="exp" />
  </div>
</template>
<script>
export default {
  name: '示例',
  components: {},
  mixins: [],
  props: {},
  data() {
    return {}
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {},
}
</script>
<style lang="scss" scoped>
.text {
  width: 475px;
  border: aqua solid 1px;
  color: #333;
  font-size: 14px;
}
.btn {
  color: dodgerblue;
  cursor: pointer;
}
.content {
  display: flex;
}
.text::before {
  content: '';
  float: right;
  height: 100%;
  margin-bottom: -20px;
}
.btn {
  float: right;
  clear: both;
  margin-right: 8px;
}
.text {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.btn::after {
  content: '展开';
}
#exp:checked + .text .btn::after {
  content: '收起';
}
</style>